<template>
  <div class="board" :class="collaspe ? 'active' : ''">
    <header class="header">
      <topNav @toggleNav="toggleNav" @search="handleSearch"></topNav>
    </header>
    <aside class="aside">
      <asideNav :logoColor="logoColor"></asideNav>
    </aside>
    <main class="main">
      <router-view></router-view>
    </main>
  </div>
</template>
<script setup>
import { reactive, onMounted, watch, ref } from "vue";
import { useRouterStore } from "@/store/path";
import topNav from "@/views/misc/publicParts/topNav.vue";
import asideNav from "@/views/misc/publicParts/asideNav.vue";
import { useRouter } from "vue-router";
const logoColor = "";
const collaspe = ref(false);
const router = useRouter();
const toggleNav = (res) => {
  collaspe.value = res;
};
const handleSearch = (data) => {
  router.push({
    path: "/home", // 你的列表页路由路径
    query: { search: data.trim() },
  });
};
</script>
<style lang="less"  scoped>
.board {
  box-sizing: border-box;
  height: 100vh;
  width: 100vw;
  // padding: 6px;
  display: grid;
  grid-template-columns: 164px 1fr;
  /* 固定左侧宽度 + 剩余空间 */
  grid-template-rows: 60px 1fr;
  /* 固定头部高度 + 剩余空间 */
  gap: 6px;
  /* 元素间距 */
  background: var(--bs-light-color);
  /* 仅用于可视化间距，可删除 */

  .header {
    background: var(--bs-bg-color);
    grid-column: 2;
    /* 位于右侧列 */
    grid-row: 1;
    /* 位于第一行 */
    border-radius: 4px;
  }

  .aside {
    background: var(--bs-bg-color);
    grid-column: 1;
    /* 位于左侧列 */
    grid-row: 1 / -1;
    background: var(--bs-theme-color);
  }

  .main {
    background: var(--bs-bg-color) url("@/assets/images/login.jpg") center
      no-repeat;
    background-size: cover;
    grid-column: 2;
    /* 位于右侧列 */
    grid-row: 2;
    /* 位于第二行 */
    overflow: auto;
    /* 内容溢出时显示滚动条 */
    min-height: 0;
    /* 允许在 grid 容器中收缩 */
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    padding: 14px;
    position: relative;
    &::before {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(255, 255, 255, 0.4);
      // backdrop-filter: blur(3px);
      content: "";
      display: block;
      z-index: 0;
    }
  }
}
</style>